<template>
  <el-collapse v-model="activeNames2">
    <el-collapse-item
      v-for="(item, index) in form.config.option.series"
      :title="form.config.option.dataset.dimensions[index+1]"
      :name="form.config.option.dataset.dimensions[index+1]"
      :key="index"
    >
      <el-form-item label="图形格式">
        <el-select v-model="item.roseType">
          <el-option
            v-for="item in configData.roseTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内径">
        <el-slider
          v-model="item.radius[0]"
          :min="0"
          :max="100"
          @input="radiusInput(item, $event)"
          :format-tooltip="formatTooltip"
        />
      </el-form-item>
      <el-form-item label="外径">
        <el-slider
          v-model="item.radius[1]"
          :min="0"
          :max="100"
          @input="radiusInput1(item, $event)"
          :format-tooltip="formatTooltip"
        />
      </el-form-item>
      <el-form-item label="是否显示标签">
        <el-switch v-model="item.label.show" />
      </el-form-item>
      <div v-if="item.label.show">
        <el-form-item label="标签位置">
          <el-select v-model="item.label.position">
            <el-option
              v-for="item in configData.positionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="item.label.color" />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            style="margin-left: 10px"
            v-model="item.label.fontSize"
            :min="10"
            :max="30"
            size="small"
          />
        </el-form-item>
        <el-form-item label="内容格式">
            <el-input
              v-model="item.label.formatter"
              type="textarea"
            />
          </el-form-item>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
  <script setup>
import { ref, defineModel } from "vue";
import { deepClone } from "@/utils/arr.js";
import { InfoFilled } from "@element-plus/icons-vue";
const activeNames2 = ref();
const form = defineModel();
const props = defineProps({
  configData: { type: Array, default: [] },
});
const formatTooltip = (val) => {
  return val + "%";
};
const radiusInput = (item, val) => {
  item.radius[0] = val;
};
const radiusInput1 = (item, val) => {
  item.radius[1] = val;
};
</script>